
import { _decorator, Component, CCInteger, CCFloat, view, Widget, UITransform, Node } from 'cc';
import { EDITOR } from 'cc/env';
const { ccclass, property, executeInEditMode, menu } = _decorator;

const TOP_MARGIN = 70 // 刘海的高度
const BOTTOM_MARGIN = 40 // 底部操作栏的高度

@ccclass
@executeInEditMode()
@menu('ComUtils/CommonWidget')
export default class CommonWidget extends Component {
    @property({
        tooltip: '是否对齐顶部',
        displayName: '对齐顶部',
    })
    isAlignTop: boolean = true;
    
    @property({
        tooltip: '是否适配刘海屏\ntrue 当前top再加上刘海屏高度\nfalse 只算top',
        displayName: '适配全面屏-顶部',
        visible() {
            return this.isAlignTop
        },
    })
    matchNotch: boolean = false;

    @property({
        tooltip: '顶部是否绝对布局，否则是百分比布局',
        displayName: '顶部绝对布局',
        visible() {
            return this.isAlignTop
        },
    })
    isAbsoluteTop: boolean = true;

    @property({
        type: CCInteger,
        tooltip: '距顶部像素值',
        displayName: '距顶部像素值',
        visible() {
            return this.isAlignTop && this.isAbsoluteTop
        },
    })
    top: number = 0;

    @property({
        type: CCFloat,
        tooltip: '距顶部百分比(0-1)',
        displayName: '距顶部百分比',
        visible() {
            return this.isAlignTop && !this.isAbsoluteTop
        },
    })
    percentTop: number = 0;

    @property({
        tooltip: '是否对齐底部',
        displayName: '对齐底部',
    })
    isAlignBottom: boolean = true;

    @property({
        tooltip: '是否适配刘海屏-底部',
        displayName: '适配全面屏-底部',
        visible() {
            return this.isAlignBottom
        },
    })
    matchNotchBottom: boolean = false;

    @property({
        tooltip: '底部是否绝对布局，否则是百分比布局',
        displayName: '底部绝对布局',
        visible() {
            return this.isAlignBottom
        },
    })
    isAbsoluteBottom: boolean = true;

    @property({
        tooltip: '距底部像素值',
        displayName: '距底部像素值',
        visible() {
            return this.isAlignBottom && this.isAbsoluteBottom
        },
    })
    bottom: number = 0;

    @property({
        type: CCFloat,
        tooltip: '距底部百分比(0-1)',
        displayName: '距底部百分比',
        visible() {
            return this.isAlignBottom && !this.isAbsoluteBottom
        },
    })
    percentBottom: number = 0;

    @property({
        displayName: '重新计算数值',
        // notify() {
        //     this.onToggle();
        // }
    })
    resetDefault: boolean = false;

    widgetTop: number = 0;
    widgetBottom: number = 0;

    onLoad() {
        // 适配的顶部（适应刘海屏）
        let ws1 = view.getVisibleSize();
        if (ws1.height / ws1.width > 16 / 9) {
            let temp = ws1.height - ws1.width * 16 / 9
            this.widgetTop = Math.min(TOP_MARGIN, temp);
            this.widgetBottom = Math.min(BOTTOM_MARGIN, temp);
        }

        this.updateAlignment();
        // errorlog('CommonWidget------onLoad', this.node.name);
        /*if (this.node.name === 'topLayer') {
            this.scheduleOnce(() => {
                EventManager.emitEvent(EventType.CommonWidgetInited);
            }, 0);
        }*/
    }
    // LIFE-CYCLE CALLBACKS---------------------------------------------------------------

    setParam(param) {
        for (const key in param) {
            this[key] = param[key];
        }
        this.updateAlignment();
    }

    updateAlignment() {
        if (EDITOR) return
        if (!this.enabled) return;
        let widget: Widget = this.node.getComponent(Widget);
        if (!widget) widget = this.node.addComponent(Widget);
        widget.isAlignTop = this.isAlignTop;
        widget.isAbsoluteTop = this.isAbsoluteTop;
        if (this.isAbsoluteTop) { // 像素
            widget.top = this.matchNotch ? this.widgetTop + this.top : this.top;
        } else { // 百分比
            widget.top = this.matchNotch ? (this.widgetTop + this.percentTop * 1334) / (this.widgetTop + 1334) : this.percentTop;
        }
        widget.isAlignBottom = this.isAlignBottom;
        widget.isAbsoluteBottom = this.isAbsoluteBottom;
        if (this.isAbsoluteBottom) { // 像素
            widget.bottom = this.matchNotchBottom ? this.widgetBottom + this.bottom : this.bottom;
        } else { // 百分比
            widget.bottom = this.matchNotchBottom ? (this.widgetBottom + this.percentBottom * 1334) / (this.widgetBottom + 1334) : this.percentBottom;
        }
        widget.updateAlignment();
    }

    update() {
        if (this.resetDefault && EDITOR) {
            this.resetDefault = false;
            let transform = this.node.getComponent(UITransform)
            let parentTransform = this.node.parent.getComponent(UITransform)
            let top = this.node.position.y + transform.height * (1 - transform.anchorY);
            let bottom = this.node.position.y - transform.height * transform.anchorY;
            // Editor.log(this.node.y, top, bottom);
            let parentTop = parentTransform.height * (1 - parentTransform.anchorY);
            let parentBottom = -parentTransform.height * parentTransform.anchorY;
            // Editor.log(parentTop, parentBottom);
            if (this.isAbsoluteTop) { // 像素
                this.top = parentTop - top;
            } else { // 百分比
                this.percentTop = (parentTop - top) / parentTransform.height;
            }
            if (this.isAbsoluteBottom) { // 像素
                this.bottom = bottom - parentBottom;
            } else { // 百分比
                this.percentBottom = (bottom - parentBottom) / parentTransform.height;
            }
        }
    }
}
